<template>
<div>
  <div style="margin-top: 20px"  >
<!--    走马灯-->
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item  >
        <img width="100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.649a4f4c3051be5498103cbad6b9b169?rik=QLO06nH%2f1jZYsg&riu=http%3a%2f%2fimage.uokon.cn%2f2017-1122-You-Should-Read.jpg&ehk=r32MeJJep2COdTZFYfKGtRbtWnIBbsnq7GLN5NAIokQ%3d&risl=&pid=ImgRaw&r=0">
      </el-carousel-item>
      <el-carousel-item >
        <img width="100%" src="https://img.zcool.cn/community/01feaa5d64dc7ca80120695c3fa14d.jpg@1280w_1l_2o_100sh.jpg">
      </el-carousel-item>
      <el-carousel-item >
        <img width="100%" src="https://ts1.cn.mm.bing.net/th/id/R-C.b6a0fa713a37be4dc4969f7844baea83?rik=dRsLDdI9OBFosg&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2017-02%2f16%2f09%2f201702160943038161-4509696.jpeg&ehk=VVPCxlk3bMNhEX2HjUHhEOqRnh%2fsQqNfFUAQgdDbT44%3d&risl=&pid=ImgRaw&r=0">
      </el-carousel-item>
      <el-carousel-item >
        <img width="100%" src="https://pic.ntimg.cn/file/20200617/29124157_164523948035_2.jpg">
      </el-carousel-item>
    </el-carousel>
  </div>

  <id style="margin: 10px 0px;">
    <el-row gutter="10" style="margin: 0 20px">
      <el-col :span="4" v-for="book in books" :key="book.id" style="margin-top: 10px">
        <el-card :body-style="{ padding: '10px' }">
          <img :src="book.tupian.replace('https','https://images.weserv.nl/?url=https')" style="height:200px">
          <div style="padding: 14px;">
            <span style="font-size: large ;font-weight:bold">{{book.bname}}</span>
            <div style="margin: 5px 5px ;font-weight: bold;color: indianred">{{book.price}}元</div>
            <div style="display: flex" >
              <el-button type="text" class="button" style="flex: 1" @click="drawer = true ,num=0,detail=book">查看详情</el-button>
              <el-button type="primary"  style="flex: 1" @click="addToCart(book.ISBN,book.bname,book.price,book.inventory)">加入购物车</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </id>

  <el-drawer
      title="书籍详情页"
      :visible.sync="drawer"
      :direction="direction"
      >
    <div style="padding: 0 20px">
      <el-card :body-style="{ padding: '0px' }" style="margin: 20px">

        <img :src="detail.tupian.replace('https','https://images.weserv.nl/?url=https')" alt="logo" width="100%">
      </el-card>
      <el-descriptions title="书籍详情" column="2" colon="false" >
        <el-descriptions-item label="书籍名称" >{{ detail.bname}}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ detail.author}}</el-descriptions-item>
        <el-descriptions-item label="价格">{{ detail.price }} 元</el-descriptions-item>
        <el-descriptions-item label="库存">{{ detail.inventory }}</el-descriptions-item>
        <el-descriptions-item label="书籍编号">{{ detail.ISBN }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="书籍内容介绍" column="2" colon="false" >
        <el-descriptions-item label="简介">{{ detail.introduction }}</el-descriptions-item>
      </el-descriptions>
      <el-row :gutter="10" style="margin: 0px 60px">
        <el-button type="primary" plain @click="addToCart(detail.ISBN,detail.bname,detail.price,detail.inventory)" >加入购物车</el-button>
      </el-row>
    </div>

  </el-drawer>
</div>
</template>

<script>
export default {
  name: "HomePage",
  data(){
    return{
      num:0,
      drawer: false,
      direction: 'rtl',
      detail:{
        'bname':'1',
        'ISBN':1,
        'author':'曹雪芹',
        'price':59.70,
        'inventory':2,
        'tupian':'https://img2.baidu.com/it/u=3319437747,2166313218&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
        'introduction':'《红楼梦》是一部具有世界影响力的人情小说、中国封建社会的百科全书、传统文化的集大成者。其作者以“大旨谈情，实录其事”自勉，只按自己的事体情理，按迹循踪，摆脱旧套，新鲜别致，取得了非凡的艺术成就。“真事隐去，假语存焉”的特殊笔法更是令后世读者脑洞大开，揣测之说久而遂多。'
       },

    }
  },
  computed:{
    books(){
      return this.$store.state.books
    }
  },
  methods:{
    addToCart(ISBN,bname,price,inventory){
      let book={
        ISBN:ISBN,
        bname:bname,
        price:price,
        inventory:inventory
      };
      console.log(book)
      this.$store.commit("addCart",book);
      this.$message('添加购物车');
    }
  },
  beforeCreate() {
    this.$request.get("http://localhost:9090/book").then(res=>{
      this.$store.commit("updateProps",res.data);
    })
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}



.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
